<!DOCTYPE html >
<html lang="fr">
	<head>
		<title>Page Fixer - Options</title>
		<meta charset="UTF-8" />
		<link type="text/css" href="jQuery/jquery-ui.css" rel="stylesheet" />

		<style type="text/css" media="screen">

			body {
				max-width: 700px;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 13px;
			}

			td {
				font-size: 13px;
				vertical-align: top;
				text-align: left;
			}

			p {
				margin-top: 0.5em;
			}

			.rawFilters {
				display: none;
			}

			.okMsg {
				display: none;
				color: #ffffff;
				background: #30e030;
				font-weight: bold;
				padding: 3px;
			}

			.errMsg {
				display: none;
				color: #ffffff;
				background: #e03030;
				font-weight:bold;
				padding:3px;
			}

			/* Filter list entry status message */
			.flMsg {
				display: none;
				color: #b0b0b0;
			}

			#newFilter, #userFiltersBox, #rawFiltersText{
				float: left;
			}
		</style>

		<script type="text/javascript" src="jQuery/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jQuery/jquery-ui-1.8.1.custom.min.js"></script>

		<script type="text/javascript" charset="utf-8">

			/****************************************
			 ************** JQuery UI ***************
			 ****************************************/

			$(function() {
				$('#tabs').tabs();
				$('button').button();
				$('.refreshButton').button('option', 'icons', {primary: 'ui-icon-refresh'});
				$('.addButton').button('option', 'icons', {primary: 'ui-icon-plus'});
				$('.removeButton').button('option', 'icons', {primary: 'ui-icon-minus'});
			});

		
			function loadCheckbox(id) {
				document.getElementById(id).checked = typeof localStorage[id] == "undefined" ? false : localStorage[id] == "true";
			}

			function saveCheckbox(id) {
				localStorage[id] = document.getElementById(id).checked;
			}

			// Loads options from localStorage and sets UI elements accordingly
			function loadOptions() {
				// Show icon in address bar? True by default
				var shouldShowIcon = localStorage["shouldShowIcon"];
				document.getElementById("shouldShowIcon").checked = typeof shouldShowIcon == "undefined" ? true : shouldShowIcon == "true";

				// User-entered filters
				var userFilters = localStorage["userFilters"];
				if(typeof userFilters == "undefined")
					userFilters = JSON.stringify(["qux.us###annoying_AdDiv", "qux.us##.ad_class"]);
				userFilters = JSON.parse(userFilters);
				// Populate list box with filter strings
				for(var i = 0; i < userFilters.length; i++)
					appendToListBox("userFiltersBox", userFilters[i]);


				saveOptions(); // Save any defaults that were created
			}

			// Reads options from UI elements and saves them in localStorage
			function saveOptions() {
				saveCheckbox("shouldShowIcon");

				// Grab contents of userFiltersBox as an array and JSONify it
				var userFiltersBox = document.getElementById("userFiltersBox");
				var userFilters = [];
				for (var i = 0; i < userFiltersBox.length; i++)
					userFilters.push(userFiltersBox.options[i].value);
				localStorage["userFilters"] = JSON.stringify(userFilters);

				// Tell background.html to show/hide icon
				// chrome.extension.sendRequest({reqtype: "refresh-page-icon"});
				// Reload filters
				chrome.extension.sendRequest({reqtype: "reload-filters"});

			}
			

			/****************************************
			 **************** Filter ****************
			 ****************************************/

			// Add a filter string to the list box.
			function appendToListBox(boxId, text) {
				var elt = document.createElement("option");
				elt.text = text;
				elt.value = text;
				document.getElementById(boxId).add(elt, null);
			}


			// Adds filter text that user typed to the selection box
			function addTypedFilter() {
				var filterText = document.getElementById("newFilter").value.split(' ').join('');
				// ABP filters don't have whitespace
				if(filterText == "") return;
				appendToListBox("userFiltersBox", filterText);
				saveOptions();
			}
			
			// Checks into our possible cached copy of this filter list and updates the UI accordingly
			function checkFilterList(key) {
				// Hide status message
				$("#" + key + "_msg").css("display", "none");

				var url = filterFiles[key];
				if(url in localStorage) {
					var list = JSON.parse(localStorage[url]);
					if(!list.error) {
						// We didn't used to store lastDownloaded, so we check for its existence and fall back on lastUpdated if necessary
						// lastDownloaded: Last time the list was downloaded
						// lastUpdated: Last time the list reports that it was updated, or else the last time it was downloaded
						var lastDownloaded = list.lastDownloaded ? list.lastDownloaded : list.lastUpdated;
						$("#" + key + "_msg").css("color", "#b0b0b0").text("Last updated at " + saneDateString(lastDownloaded)).css("display", "inline");
					}
					else {
						// Display error only if checked
						if(document.getElementById(key).checked) {
							$("#" + key + "_msg").text(list.error).css("color", "#a03030").css("display", "inline");
						}
					}
				} else {
					// If we don't have this filter list but it's enabled, fetch it
					if(document.getElementById(key).checked == true)
						updateFilterList(key);
				}
			}
			
			// Check to see if all filter lists are up to date
			function checkAllFilterLists() {
				for(key in filterFiles) {
					checkFilterList(key);
				}
			}
			
			// Removes all currently selected filters
			function removeSelectedFilters() {
				var userFiltersBox = document.getElementById("userFiltersBox");
				for (var i = userFiltersBox.length-1; i >= 0; i--) {
					if (userFiltersBox.options[i].selected)
						userFiltersBox.remove(i);
				}
				saveOptions();
			}
			
			
			/**************************
			 ******* RAW FORMAT *******
			 **************************/
			 
			
			// Shows raw filters box and fills it with the current user filters
			function showFiltersInRawFormat() {
				$(".rawFilters").show();
				var userFilters = localStorage["userFilters"];
				if(typeof userFilters != "undefined") {
					userFilters = JSON.parse(userFilters);
					document.getElementById("rawFiltersText").value = userFilters.join("\n");
				}
			}

			// Imports filters in the raw text box
			function importRawFiltersText() {
				$("#userFiltersBox").children().remove();
				var filters = document.getElementById("rawFiltersText").value.split("\n");
				for(var i = 0; i < filters.length; i++) {
					var text = filters[i].replace(/\s+$/, "").replace(/^\s+/, "");
					if(text.length > 0) {
						// Filter out "comment" characters
						switch(text[0]) {
							case '(':
							case '[':
							case '!':
								break;
							default:
								appendToListBox("userFiltersBox", text);
						}
					}
				}
				saveOptions();
			}

		</script>

	</head>

	<body onload="loadOptions(); checkAllFilterLists()">

		<div id="header">
			<img src="icons/logo-16.png">
			<h1>Page Fixer - Options</h1>
		</div>

		<div id="tabs">
			<ul>
				<li><a href="#tab-userfilters">Add your own filters</a></li>
				<li><a href="#tab-general">General</a></li>
			</ul>

			<div id="tab-userfilters">

				<input id="newFilter" type="text" value="" style="width:500px">
				<button class="addButton" onClick="addTypedFilter()">Add</button>

				<br />

				<select id="userFiltersBox" size="20" style="width: 500px; background: white;"></select>
				<button class="removeButton" onClick="removeSelectedFilters()">Remove selected</button>

				<!--
				<div style="font-size: 90%; text-align: right"><a onClick="showFiltersInRawFormat()" href="#">Edit filters as raw text</a></div>

				<div class="rawFilters" style="width: 500px">
					<textarea id="rawFiltersText" style="width: 100%; height: 300px"></textarea>
					<button class="validButton" onClick="importRawFiltersText()">Apply changes</button>
				</div>
				-->
			</div>


			<div id="tab-general">
				<input type="checkbox" id="shouldShowIcon" onClick="saveOptions()" /> Show icon in address bar<br/>

				<br/>
				Found a bug in Page Fixer? Please <a href="http://code.google.com/p/pagefixer/issues/list">report it here</a>.

			</div>
		</div>


	</body>

</html>
